const App = () => {
    return (
        <>
            <unNameSlot>
                <div>abc</div>
            </unNameSlot>
            <nameSlot1>
                <div slot="first">abc</div>
                <div slot="second">abc</div>
                <div slot="third">abc</div>
            </nameSlot1>
            <nameSlot2 first={<span>1</span>} second={<span>2</span>} >
            </nameSlot2>
            <nameSlot3>
                {{
                    first: <div>1</div>,
                    content: <div>2</div>
                }}
            </nameSlot3>
        </>
    )
}
const unNameSlot = (props) => {
    const children = props.children
    return (
        <>
            {children}
        </>
    )
}
const nameSlot1 = (props) => {
    const children = props.children
    const firstSlot = []
    const secondSlot = []
    const thirdSlot = []
    const defaultSlot = []
    children.map(item => {
        const { slot } = item.props
        switch (slot) {
            case 'first':
                firstSlot.push(item)
                break
            case 'second':
                secondSlot.push(item)
                break
            case 'third':
                thirdSlot.push(item)
                break
            default:
                defaultSlot.push(item)
        }
    })
    return (
        <>
            {firstSlot.map(item => item)}
            {secondSlot.map(item => item)}
            {thirdSlot.map(item => item)}
            {defaultSlot.map(item => item)}
        </>
    )
}
const nameSlot2 = (props) => {
    return (
        <>
            {props.first}
            {props.second}
        </>
    )
}
const nameSlot3 = (props) => {
    const { first, content } = props.children
    return (
        <>
            {first}
            {content}
        </>
    )
}